<template>
  <el-dialog
    :title="id?'修改':'新增'"
    :visible.sync="dialogVisible"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :before-close="handleClose"
    width="500px"
    @open="open"
  >
    <el-form ref="form" v-loading="infoLoading" :model="info" :rules="rules" label-width="140px">
      <el-scrollbar ref="myScrollbar" wrap-class="wrapClass" class="form-scrollbar">
        <div class="el-dialog-div">
          <el-form-item label="OEM名称" prop="name">
            <el-input v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item label="域名" prop="domain">
            <el-input v-model="info.domain" placeholder="请填写域名"/>
          </el-form-item>
          <el-form-item label="左上角文字" prop="title">
            <el-input v-model="info.title" placeholder="请填写左上角文字"/>
          </el-form-item>
          <el-form-item label="左上角样式">
            <el-radio-group v-model="info.style">
              <el-radio :label="1">单行显示</el-radio>
              <el-radio :label="2">双行显示(文字加br)</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="展示首页图标下文字">
            <el-radio-group v-model="info.showIndexContent">
              <el-radio :label="true">展示</el-radio>
              <el-radio :label="false">不展示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="info.showIndexContent" label="首页图标下文字">
            <el-input v-model="info.indexContent" placeholder="请填写首页图标下文字"/>
          </el-form-item>
          <el-form-item label="展示登录页图标">
            <el-radio-group v-model="info.showLoginLogo">
              <el-radio :label="true">展示</el-radio>
              <el-radio :label="false">不展示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="展示首页图标">
            <el-radio-group v-model="info.showIndexLogo">
              <el-radio :label="true">展示</el-radio>
              <el-radio :label="false">不展示</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="登录LOGO" prop="logoUrl">
            <el-upload
              class="avatar-uploader"
              :action="uploadAction"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :data="{type: 1}"
              accept=".jpeg,.png,.jpg"
              :before-upload="beforeLogoUpload">
              <img v-if="info.logoUrl" :src="info.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="Icon" prop="iconUrl">
            <el-upload
              class="avatar-uploader"
              :action="uploadAction"
              :show-file-list="false"
              :on-success="handleIconSuccess"
              :data="{type: 1}"
              accept=".ico"
              :before-upload="beforeIconUpload">
              <img v-if="info.iconUrl" :src="info.iconUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="info.state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-scrollbar>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-row>
        <el-col :span="12" class="btnEdit">
          <el-button :disabled="infoLoading" type="primary" @click="subInfo">确 定</el-button>
        </el-col>
        <el-col :span="12" class="btnEdit">
          <el-button @click="handleClose">取 消</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<style scoped>

/deep/ .el-dialog__body {
  padding: 0;
}

.form-scrollbar {
  height: 500px;
}

.el-dialog-div {
  padding: 20px 20px 0 20px;
  min-width: 400px;
}

.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
import { postAction } from '@/api/common'
export default {
  name: 'edit',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      uploadAction: '/api/Upload/UploadOemImg',
      dialogVisible: this.show,
      isChange: false,
      initForm: true,
      // 页面元素
      info: {
        name: '',
        title: '',
        style: 1,
        domain: '',
        iconUrl: '',
        logoUrl: '',
        state: 1,
        indexContent: '大数据智能搜索,让外贸更轻松！',
        showIndexContent: true,
        showIndexLogo: true,
        showLoginLogo: true
      },
      infoLoading: true,

      // 验证
      rules: {
        name: [{ required: true, message: '名称必填', trigger: 'change' }],
        title: [{ required: true, message: '请填写左上角文字', trigger: 'blur' }],
        domain: [{ required: true, message: '域名不能为空(不带http)', trigger: 'blur' }],
        logoUrl: [{ required: true, message: '请上传logo', trigger: 'blur' }],
        iconUrl: [{ required: true, message: '请上传ico', trigger: 'blur' }]
      }
    }
  },
  watch: {
    show() {
      this.dialogVisible = this.show
      this.initForm = true
    },
    info: {
      handler: function() {
        if (this.initForm) {
          this.isChange = false
          this.initForm = false
        } else {
          this.isChange = true
        }
      },
      deep: true
    }
  },

  methods: {
    async open() {
      this.infoLoading = true
      // eslint-disable-next-line eqeqeq
      if (this.id != '') {
        const { data } = await postAction({ id: this.id }, 'oem/GetInfo')
        this.info = data
        console.log(this.info)
      } else {
        this.info = {
          name: '',
          title: '',
          style: 1,
          domain: '',
          iconUrl: '',
          logoUrl: '',
          state: 1,
          showIndexContent: true,
          showIndexLogo: true,
          showLoginLogo: true
        }
      }
      this.infoLoading = false
    },
    subInfo() {
      this.$refs.form.validate(async(valid) => {
        // form验证
        if (valid) {
          this.infoLoading = true

          // eslint-disable-next-line eqeqeq
          if (this.id == '') {
            await postAction(this.info, 'oem/SubAddInfo')
          } else {
            await postAction(this.info, 'oem/SubEditInfo')
          }

          this.infoLoading = false
          // 调用父级页面方法
          this.closeAction()
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleIconSuccess(res) {
      // eslint-disable-next-line eqeqeq
      if (res.code == 20000) {
        this.info.iconUrl = res.data
        this.infoLoading = false
      } else {
        this.$message.error(res.message)
        this.infoLoading = false
      }
    },
    beforeIconUpload(file) {
      this.infoLoading = true
      const isType = file.type === 'image/x-icon'
      const isLt100KB = file.size / 1024 / 100 < 1
      if (!isType) {
        this.$message.error('上传图片只能是 icon 格式!')
        this.infoLoading = false
      }
      if (!isLt100KB) {
        this.$message.error('上传图片大小不能超过 100kb!')
        this.infoLoading = false
      }
      return isType && isLt100KB
    },
    handleLogoSuccess(res) {
      // eslint-disable-next-line eqeqeq
      if (res.code == 20000) {
        this.info.logoUrl = res.data
        this.infoLoading = false
      } else {
        this.$message.error(res.message)
        this.infoLoading = false
      }
    },
    beforeLogoUpload(file) {
      this.infoLoading = true
      // image/x-icon
      const isType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt500KB = file.size / 1024 / 500 < 1
      if (!isType) {
        this.$message.error('上传图片只能是 JPG,JPEG,PNG 格式!')
        this.infoLoading = false
      }
      if (!isLt500KB) {
        this.$message.error('上传图片大小不能超过 500kb!')
        this.infoLoading = false
      }
      return isType && isLt500KB
    },
    handleClose(done) {
      if (this.isChange) {
        this.$confirm('您有未保存的修改，确定关闭此页吗？', '提示', {
          type: 'warning'
        })
          .then(_ => {
            this.$emit('update:show', false)
          })
          .catch(e => {
            console.log(e)
          })
      } else {
        this.$emit('update:show', false)
      }
    },
    closeAction() {
      this.$emit('closeAction')
    }

  }
}
</script>
